<template>
	<view class="sort">
		<view class="leftBox">
			<view class="item" :class="item.id == one_cate_id ? 'active' : ''" @click="oneCateActiveEvent(index)" v-for="(item, index) in one_cate_list" :key="index" >{{item.title}}</view>
		</view>
		<view class="rightBox">
			<view class="tabs">
				<u-tabs :list="two_cate_list" name="title" :current="tabsCurrent" active-color="#fe0000" font-size="26" @change="tabsChange"></u-tabs>
			</view>
			<view class="goodsList">
				<view class="item flex_space_b" v-for="(item, index) in goods_list" :key="index" @click="goDetails(index)">
					<view class="imageBox">
						<u-image width="200rpx" height="200rpx" border-radius="12" :src="item.goods_main_img"></u-image>
						<!-- <view class="mask">最高补贴:￥53.92</view> -->
						<!-- <view class="rect"></view>
						<view class="desc">热拍</view> -->
						<view class="mask flex_conter_c" v-if="item.store_num < 1">
							<image class="soldOut" src="/static/soldOut.png" mode="widthFix"></image>
						</view>
					</view>
					<view class="info flex_conter_c">
						<view class="flex1 goodsInfoBox">
							<view class="title u-line-2">{{item.goods_title}}</view>
							<view class="data">
								<view class="flex">
									<view class="price">￥<text>{{item.sales_price}}</text></view>
									<!-- <view class="group">差2人成团</view> -->
									<view class="original">￥{{item.original_price}}</view>
								</view>
								<!-- <view class="ratio">
									<text>拼中率:{{item.award_rate}}%</text>
								</view> -->
								<view class="bottoBox" v-if="item.is_score_goods == '10'">
									<view class="group">{{item.sub_team_count}}人团</view>
									<view class="subsidy"><text class="icon">补</text><text class="text">￥{{item.max_income}}</text></view>
								</view>
								<view class="bottoBox" v-else>
									<view class="subsidy2">
										<!-- 抵:<text>{{item.discounts_rate}}</text>
										<text class="line">+</text> 
										<text>￥{{numFilter(item.sales_price-item.score_use)}}</text>到手 -->
										<view>积分到手价:<text class="text">￥{{numFilter(item.sales_price - item.score_use)}}</text></view>
									</view>
								</view>
								<view class="car flex_conter_c">
									<u-icon name="gouwuche" custom-prefix="custom-icon" size="28" color="#fe0000"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var util = require('../../common/util.js');
	export default {
		data() {
			return {
				one_cate_id:0,
				two_cate_id:0,
				one_cate_list:[],
				two_cate_list:[],
				goods_list:[],
				tabsCurrent: 0,
				p:1,
				is_loading:false,
				is_more:true
			}
		},
		onLoad() {
			this.loadData(true);
		},
		onReachBottom() {
			if(!this.is_loading){
			  if(!this.is_more){
				util.toast("没有更多数据了");
				return false;
			  }
			  this.p = parseInt(this.p) + 1;
			  this.moreData();
			}
		},
		methods: {
			loadData: function(is_loading){
				// 加载数据
				var that = this;
				let data = {
					'one_cate_id':this.one_cate_id,
					'two_cate_id':this.two_cate_id
				};
				util.requestPost("api.php/home/goodsCateGoods", data, function(res) {
					that.one_cate_list = res.data.one_cate_list;
					that.two_cate_list = res.data.two_cate_list;
					that.goods_list = res.data.goods_list;
				},is_loading);
			},
			moreData: function(){
				// 加载数据
				var that = this;
				let data = {
					'one_cate_id':this.one_cate_id,
					'two_cate_id':this.two_cate_id,
					'p':this.p
				};
				this.is_loading = true;
				util.requestPost("api.php/home/searchGoodsList", data, function(res) {
					let is_more = false;
					if(res.data.goods_list.length >=15){
					  is_more = true;
					}
					that.goods_list = that.goods_list.concat(res.data.goods_list);
					that.is_loading = false;
					that.is_more = is_more;
				});
			},
			oneCateActiveEvent (index) {
				// 选择一级分类
				this.one_cate_id = this.one_cate_list[index].id;
				this.tabsCurrent = 0;
				this.two_cate_id = 0;
				this.p = 1;
				this.is_more = true;
				this.goods_list = [];
				this.loadData(true);
			},
			tabsChange (index) {
				// 选择二级分类
				this.tabsCurrent = index
				this.two_cate_id = this.two_cate_list[index].id;
				this.p = 1;
				this.is_more = true;
				this.goods_list = [];
				this.loadData(true);
			},
			goDetails (index) {
				// 商品详情
				uni.navigateTo({
					url: '/pages/index/goodsDetails?goods_id='+this.goods_list[index].goods_id
				})
			},
			numFilter (value) {
				// 截取当前数据到小数点后两位
				let realVal = parseFloat(value).toFixed(2)
				return realVal
			}
		}
	}
</script>

<style scoped>
.sort {
	/*  #ifdef  H5  */
	padding-bottom: 50px;
	/*  #endif  */
}
.leftBox {
	width: 180rpx;
	position: fixed;
	top: 0;
	left: 0;
	/*  #ifndef   H5  */
	bottom: 0;
	/*  #endif  */
	
	/*  #ifdef  H5  */
	bottom: 50px;
	/*  #endif  */
	background-color: var(--bgColor);
	overflow: scroll;
}
.leftBox .item {
	padding: 26rpx 20rpx;
	text-align: center;
	font-size: 28rpx;
	color: #333333;
}
.leftBox .item.active {
	font-size: 30rpx;
	font-weight: 600;
	background-color: #FFFFFF;
	color: var(--primaryColor);
}
.rightBox {
	margin-left: 180rpx;
}
.rightBox .tabs {
	border-bottom: 1rpx solid #EEEEEE;
	position: fixed;
	top: 0;
	left: 180rpx;
	right: 0;
	z-index: 2;
}

.goodsList {
	padding: 92rpx 20rpx 0;
}
.goodsList .item {
	border-radius: 12rpx;
	overflow: hidden;
}
.goodsList .item .imageBox {
	position: relative;
	border-radius: 12rpx;
	overflow: hidden;
}
.goodsList .item .imageBox .mask {
	position: absolute;
	bottom: 0;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	color: #FFFFFF;
	font-size: 24rpx;
	text-align: center;
}
.goodsList .item .info {
	flex: 1;
	padding: 40rpx 20rpx;
	border-bottom: 1rpx solid #EEEEEE;
	height: 260rpx;
}
.goodsList .item .info .goodsInfoBox {
	display: flex;
	justify-content: space-between;
	flex-direction: column;
	height: 100%;
}
.goodsList .item .info .title {
	color: #333333;
	font-size: 26rpx;
	font-weight: 600;
}
.goodsList .item .info .data {
	margin-top: 8rpx;
	position: relative;
}
.goodsList .item .info .data .flex {
	display: flex;
	align-items: flex-end;
}
.goodsList .item .info .data .flex .price {
	color: var(--primaryColor);
	font-size: 24rpx;
	margin-right: 20rpx;
	font-weight: 600;
}
.goodsList .item .info .data .flex .price text {
	font-size: 32rpx;
}
.goodsList .item .info .data .flex .original {
	color: #666;
	font-size: 24rpx;
	text-decoration: line-through;
}
.goodsList .item .info .data .ratio {
	color: #666;
	font-size: 24rpx;
	margin-top: 8rpx;
	height: 48rpx;
	vertical-align: bottom;
}
.goodsList .item .info .data .ratio text:first-of-type {
	margin-right: 28rpx;
	position: absolute;
	bottom: 0;
	left: 0;
}
.goodsList .item .info .data .bottoBox {
	margin-top: 8rpx;
}
.goodsList .item .info .data .bottoBox .group {
	display: inline-block;
	font-size: 20rpx;
	color: var(--primaryColor);
	/* background-color: var(--primaryColor); */
	border: 1rpx solid var(--primaryColor);
	border-radius: 8rpx;
	padding: 0 6rpx;
	vertical-align: bottom;
}
.goodsList .item .info .data .bottoBox .subsidy {
	display: inline-block;
	font-size: 22rpx;
	margin-left: 16rpx;
	color: var(--primaryColor);
	border: 1rpx solid var(--primaryColor);
	border-radius: 8rpx;
	overflow: hidden;
	vertical-align: bottom;
}
.goodsList .item .info .data .bottoBox .subsidy .icon{
	color: #FFFFFF;
	background-color: var(--primaryColor);
	padding: 0 6rpx;
}
.goodsList .item .info .data .bottoBox .subsidy .text{
	padding: 0 6rpx;
}
.goodsList .item .info .data .bottoBox .subsidy2 {
	display: inline-block;
	font-size: 22rpx;
}
.goodsList .item .info .data .bottoBox .subsidy2 text {
	color: var(--primaryColor);
}
.goodsList .item .info .data .bottoBox .subsidy2 .line {
	color: #333333;
	font-weight: bold;
}

.goodsList .item .info .data .btn {
	background: var(--btnBgColor);
	position: absolute;
	bottom: 0;
	right: 0;
	border-radius: 40rpx;
}
.goodsList .item .info .data .car {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 48rpx;
	height: 48rpx;
	border-radius: 40rpx;
	background: #ffe5e5;
}
</style>
